<template>
    <span>
        <el-button type="primary" v-if="authority.attrGroupAdd && authority.total" @click="add">添加属性组</el-button>
        <el-input placeholder="通过属性组名称筛选" v-model="nameFind" @input="filterName" style="width:300px;margin-left:15px"></el-input>
        <el-cascader style="width:300px;margin-left:15px" 
                    v-model="categoryFind" 
                    placeholder="通过类别筛选"
                    :options="options" 
                    clearable
                    @change="filterCategory"
                    :props="selectProps" />
    </span>

<el-divider></el-divider>
  <el-table-v2
    :columns="columns"
    :data="showData"
    :width="1300"
    :height="500"
    
  />
    <el-dialog
        v-model="addDialog"
        title="添加属性组"
        width="500px">
        <el-form :model="newAttributeGroup" label-position="left" ref="addForm">
            <el-form-item label="属性组名称" label-width="100px">
                <el-input v-model="newAttributeGroup.attrGroupName" style="width:300px"/>
            </el-form-item>
            <el-form-item label="所属类别" label-width="100px">
                <el-cascader style="width:300px" v-model="addSelect" :options="options" :props="selectProps" @change="addSelectChange" />
            </el-form-item>
            <el-form-item label="属性组描述" label-width="100px">
                <el-input v-model="newAttributeGroup.description" type="textarea" :rows="5" style="width:300px"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelAdd()">取消</el-button>
            <el-button type="primary" @click="toAdd">确认添加</el-button>
        </template>
    </el-dialog>

    <el-dialog
        v-model="updateDialog"
        title="修改属性组信息"
        width="500px">
        <el-form :model="updateAttributeGroup" label-position="left" ref="updateForm">
            <el-form-item label="属性组名称" label-width="100px">
                <el-input v-model="updateAttributeGroup.attrGroupName" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="属性组名称" label-width="100px">
                <el-cascader style="width:300px" v-model="updateSelect" :options="options" :props="selectProps"
                    @change="updateSelectChange" />
            </el-form-item>

            <el-form-item label="属性组描述" label-width="100px">
                <el-input v-model="updateAttributeGroup.description" type="textarea" :rows="5" style="width:300px"></el-input>
            </el-form-item>

        </el-form>
            <template #footer>
                <el-button @click="cancelUpdate()">取消</el-button>
                <el-button type="primary" @click="toUpdate">确认修改</el-button>
            </template>
    </el-dialog>
</template>

<script>
import { ElButton } from 'element-plus'
import {  getCurrentInstance, ref, reactive } from 'vue'


export default{
    setup(){
        const tableData = ref([])
        const showData = ref([])
        const addForm = ref()
        const updateForm = ref()
        const {proxy} = getCurrentInstance()
        const thirdCategory = ref([])
        const thirdCategoryIdToNameMap = ref(new Map())
        const addDialog = ref(false)
        const updateDialog = ref(false)
        const options = ref([])
        const updateSelect = ref([])
        const nameFind = ref('')
        const categoryFind = ref([])
        const authority = reactive({
            total:false,
            attrGroupAdd:false,
            attrGroupUpdate:false,
            attrGroupDelete:false,
            attrManage:false
        })

        const selectProps = {
            label:'name',
            children:'children',
            value:'id'
        }

        const initAuthority = () =>{
            authority.total = proxy.$store.state.authority[proxy.$power.map.get('商品管理-属性组管理').property]
            authority.attrGroupAdd = proxy.$store.state.authority[proxy.$power.map.get('商品管理-属性组管理-添加').property]
            authority.attrGroupDelete = proxy.$store.state.authority[proxy.$power.map.get('商品管理-属性组管理-删除').property]
            authority.attrGroupUpdate = proxy.$store.state.authority[proxy.$power.map.get('商品管理-属性组管理-修改').property]
            authority.attrManage = proxy.$store.state.authority[proxy.$power.map.get('商品管理-属性管理').property]
            console.log(authority)
            Object.freeze(authority)
            proxy.$power.totalCheckAuthority(authority)
        }

        const newAttributeGroup = reactive({
            attrGroupName:'',
            categoryId:-1,
            description:'',
            sort:0,
            icon:''
        })

        const updateAttributeGroup = reactive({
            id:-1,
            attrGroupName:'',
            categoryId:-1,
            description:'',
            sort:0,
            icon:''
        })

        const columns = [
            {
                key:'id',
                dataKey:'id',
                title:'序号',
                width:100,
                align:'center'
            },
            {
                key:'attrGroupName',
                dataKey:'attrGroupName',
                title:'属性组名称',
                width:170,
            },
            {
                key:'description',
                dataKey:'description',
                title:'属性组描述',
                width:500
            },
            {
                key:'categoryName',
                dataKey:'categoryName',
                title:'所属类别',
                width:230
            },
            {
                key:'do',
                title:'操作',
                width:300,
                cellRenderer:(data)=>{
                    if(authority.attrManage && authority.attrGroupUpdate && authority.attrGroupDelete){
                        return (
                        <>
                        <ElButton size="small" onClick={()=>{toAttr(data)}} type="primary">属性管理</ElButton>
                        <ElButton size="small" onClick={()=>{update(data)}} type="warning">修改</ElButton>
                        <ElButton size="small" onClick={()=>{toDelete(data)}} type="danger">删除</ElButton>
                        </>
                        )
                    }else if(authority.attrManage && authority.attrGroupUpdate){
                        return (
                        <>
                        <ElButton size="small" onClick={()=>{toAttr(data)}} type="primary">属性管理</ElButton>
                        <ElButton size="small" onClick={()=>{update(data)}} type="warning">修改</ElButton>
                        </>
                        )
                    }else if(authority.attrManage && authority.attrGroupDelete){
                        return (
                            <>
                            <ElButton size="small" onClick={()=>{toAttr(data)}} type="primary">属性管理</ElButton>
                            <ElButton size="small" onClick={()=>{toDelete(data)}} type="danger">删除</ElButton>
                            </>
                        )
                    }else if(authority.attrGroupUpdate && authority.attrGroupDelete){
                        return (
                            <>
                            <ElButton size="small" onClick={()=>{update(data)}} type="warning">修改</ElButton>
                            <ElButton size="small" onClick={()=>{toDelete(data)}} type="danger">删除</ElButton>
                            </>
                        )
                    }else if(authority.attrGroupUpdate){
                        return (
                            <>
                            <ElButton size="small" onClick={()=>{update(data)}} type="warning">修改</ElButton>
                            </>
                        )
                    }else if(authority.attrManage){
                        return (
                            <ElButton size="small" onClick={()=>{toAttr(data)}} type="primary">属性管理</ElButton>
                        )
                    }else if(authority.attrGroupDelete){
                        return (
                             <ElButton size="small" onClick={()=>{toDelete(data)}} type="danger">删除</ElButton>
                        )
                    }
                }

            }
        ]

        const getOptions = () => {
            proxy.$http.get(proxy.$url.PmsCategoryControllerBaseUrl + '/getCategoryTree')
                .then(res =>{
                    if(res.data.code === 2000){
                        options.value = res.data.data.data
                        getCategory()
                    }
                })
        }

        const addSelect = ref([])

        const addSelectChange = ()=>{
            newAttributeGroup.categoryId = addSelect.value[2]
        }

        const getCategory = ()=>{
            proxy.$http.get(proxy.$url.PmsCategoryControllerBaseUrl + '/getThirdCategory')
                .then(res => {
                    if(res.data.code === 2000){
                        thirdCategory.value = res.data.data
                        createThirdCategoryMap()
                        getData()
                    }
                })
        }

        const createThirdCategoryMap = () => {
            thirdCategoryIdToNameMap.value = new Map()
            for (let item of thirdCategory.value){
                thirdCategoryIdToNameMap.value.set(item.id,item.name)
            }
        }

        const add = () =>{
            newAttributeGroup.attrGroupName = ''
            newAttributeGroup.description = ''
            newAttributeGroup.categoryId = -1
            addDialog.value = true
        }

    

        const toAdd = () =>{
            proxy.$http.put(proxy.$url.PmsAttrGroupControllerBaseUrl + '/check/addAttrGroup',newAttributeGroup)
                .then(res=>{
                    if(res.data.code === 2000){
                        proxy.$message({
                            message:res.data.message,
                            type:"success"
                        })
                        getData()
                        cancelAdd()
                    }else{
                        proxy.$message({
                            message:res.data.message,
                            type:"error"
                        })
                    }
                })
        }

        const cancelAdd = () => {
            addDialog.value = false
            newAttributeGroup.name = ''
            newAttributeGroup.categoryId = -1
            addSelect.value = []
            newAttributeGroup.description = ''
            addForm.value.resetFields()
        }

        const toUpdate = () =>{
            proxy.$http.post(proxy.$url.PmsAttrGroupControllerBaseUrl + '/check/updateAttrGroup',updateAttributeGroup)
                .then(res => {
                    if(res.data.code === 2000){
                        proxy.$message({
                            message:res.data.message,
                            type:"success"
                        })
                        getData()
                        cancelUpdate()
                    }else{
                        proxy.$message({
                            message:res.data.message,
                            type:"error"
                        })
                    }
                })
        }

        const update = (data) =>{
            updateAttributeGroup.attrGroupName = data.rowData.attrGroupName
            updateAttributeGroup.description = data.rowData.description
            updateAttributeGroup.categoryId = data.rowData.categoryId
            updateAttributeGroup.id = data.rowData.id
            let second = -1
            for(let item of thirdCategory.value){
                if(item.id === data.rowData.categoryId){
                    second = item.parentId
                    break;
                }
            }
            let first = -1;
            for(let item of options.value){
                let flag = 0
                for(let i of item.children){
                    if(i.id === second){
                        flag = 1
                        first = item.id
                        break;
                    }
                }
                if(flag === 1){
                    break;
                }
            }
            updateSelect.value = [first,second,data.rowData.categoryId]
            updateDialog.value = true
        }

        const updateSelectChange = ()=>{
            updateAttributeGroup.categoryId = updateSelect.value[2]
        }

        const cancelUpdate = () => {
            updateDialog.value = false
            updateForm.value.resetFields()
        }

        const getData = () => {
            proxy.$http.get(proxy.$url.PmsAttrGroupControllerBaseUrl + '/getAllAttrGroup')
                .then(res => {
                    if(res.data.code === 2000){
                        for(let item of res.data.data){
                            item.categoryName = thirdCategoryIdToNameMap.value.get(item.categoryId);
                        }
                        tableData.value = res.data.data
                        showData.value = tableData.value
                    }
                })
        }

        const filterName = () => {
            if(nameFind.value === ''){
                showData.value = tableData.value
                return 
            }
            showData.value = []
            for(let item of tableData.value){
                if(item.attrGroupName.indexOf(nameFind.value) != -1){
                    showData.value.push(item)
                }
            }
        }

        const filterCategory = () => {
            if(!categoryFind.value){
                showData.value = tableData.value
                return 
            }
            showData.value = []
            for(let item of tableData.value){
                if(item.categoryId === categoryFind.value[2]){
                    showData.value.push(item)
                }
            }
        }

        const toAttr = (data) => {
            proxy.$router.push({name:'attribute',query:{categoryId:data.rowData.categoryId,groupId:data.rowData.id}})
        }

        const toDelete = (data) => {
            proxy.$http.delete(proxy.$url.PmsAttrGroupControllerBaseUrl + '/check/deleteAttrGroup',{
                params:{
                    id:data.rowData.id
                }
            }).then(res => {
                if(res.data.code === 2000){
                    proxy.$message({
                        message:res.data.message,
                        type:'success'
                    })
                    getData()
                }else{
                    proxy.$message({
                        message:res.data.message,
                        type:'error'
                    })
                }
            })
        }

        initAuthority()
        getOptions()

        return {
            columns,
            showData,
            addDialog,
            updateDialog,
            getCategory,
            newAttributeGroup,
            updateAttributeGroup,
            addSelect,
            updateSelect,
            authority,
            updateSelectChange,
            addSelectChange,
            selectProps,
            toAdd,
            add,
            toUpdate,
            cancelAdd,
            cancelUpdate,
            filterName,
            filterCategory,
            nameFind,
            categoryFind,
            addForm,
            updateForm,
            options}
    }
}
</script>

<style scoped>

</style>
